<template>
	<view style="position: relative;">
		<view style="background-color: white;">
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
				<view style="padding: 20rpx;">
					<u-form-item label="活动名称" prop="name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入"/>
					</u-form-item>
					<u-form-item label="活动地点" prop="address" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入"/>
					</u-form-item>
					<u-form-item label="活动开始时间" prop="start_time" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;" @click.stop="showStartTime = true; " >
							<input style=" pointer-events: none;" :focus="false" v-model="info.start_time" 
								disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
						</view>
					</u-form-item>
					<u-form-item label="活动结束时间" prop="name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<view class="row-between-center" style="width: 100%;" @click.stop="showStartTime = true; " >
							<input style=" pointer-events: none;" :focus="false" v-model="info.start_time" 
								disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
						</view>
					</u-form-item>
					<u-form-item label="人数上线" prop="limit" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.limit" type="number"/>
					</u-form-item>
					<u-form-item label="报名费用" prop="fee" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.fee" type="number"/>
					</u-form-item>
					<u-form-item label="主办方手机号" prop="mobile" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.mobile" type="number"/>
					</u-form-item>
					<u-form-item label="活动形式" prop="type" :labelWidth="labelWidth" required labelPosition="left" >
						<view class="row-between-center" style="margin-left: -120rpx;width: 100%;">
							<view class="tip">
								创建后不可变更
							</view>
							<view>
								<u-radio-group v-model="info.type">
									<u-radio shape="circle" label="线上"  name="线上"></u-radio>
									<u-radio shape="circle" label="线下" style="margin-left: 40rpx;"   name="线下"></u-radio>
								</u-radio-group>
							</view>
						</view>
					</u-form-item>
				</view>
				
					<view style="height: 20rpx;background: #F2F3F8;"></view>
					<view class="fee col-center-start">
						<view class="fee-text">活动利润比例</view>
					</view>
					<view style="padding: 20rpx;">
					 	<u-form-item label="平台" prop="fee_platform" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
					 		<view style="width: 100%;" class="row-between-center">
					 			<input placeholder="0.00" v-model="info.fee_platform" type="number"/>
					 			<view>%</view>
					 		</view>
					 	</u-form-item>
					 	<u-form-item label="省级" prop="fee_province" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
					 		<view style="width: 100%;" class="row-between-center">
					 			<input placeholder="0.00" v-model="info.fee_province" type="number"/>
					 			<view>%</view>
					 		</view>
					 	</u-form-item>
					 	<u-form-item label="市级" prop="fee_city" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
					 		<view style="width: 100%;" class="row-between-center">
					 			<input placeholder="0.00" v-model="info.fee_city" type="number"/>
					 			<view>%</view>
					 		</view>
					 	</u-form-item>
					 	<u-form-item label="区县级" prop="fee_area" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
					 		<view style="width: 100%;" class="row-between-center">
					 			<input placeholder="0.00" v-model="info.fee_area" type="number"/>
					 			<view>%</view>
					 		</view>
					 	</u-form-item>
					 	<u-form-item label="商圈级" prop="fee_circle" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
					 		<view style="width: 100%;" class="row-between-center">
					 			<input placeholder="0.00" v-model="info.fee_circle" type="number"/>
					 			<view>%</view>
					 		</view>
					 	</u-form-item>
					 	<view class="row-between-center" style="margin-top: 20rpx;margin-bottom: 20rpx">
					 		<view>直接推荐人</view>
					 		<view>第一次 30%，第二次5%</view>
					 	</view>
						<view style="background-color: #eaebec;height: 1rpx;"></view>
					 	<view class="row-between-center" style="margin-top: 20rpx;margin-bottom: 10rpx;">
					 		<view>加盟商裂变分润</view>
					 		<view>5%</view>
					 	</view>
					</view>
			
					<view style="height: 20rpx;background: #F2F3F8;"></view>
					<view style="padding: 20rpx;">
						<u-form-item label="活动嘉宾" prop="active_invitor" :labelWidth="labelWidth" required labelPosition="top" :borderBottom="true">
							<u--textarea v-model="info.active_invitor" placeholder="请输入内容" count border="none"
								:maxlength="50"></u--textarea>
						</u-form-item>
						<u-form-item label="详情描述" prop="active_desc" :labelWidth="labelWidth" required labelPosition="top" :borderBottom="true">
							<u--textarea v-model="info.active_desc" placeholder="请输入内容" count border="none"
								:maxlength="50"></u--textarea>
						</u-form-item>
						<u-form-item label="列表图片" prop="active_desc" :labelWidth="labelWidth" required labelPosition="top" :borderBottom="true">
								<u-upload
								style="margin-top: 20rpx;"
									:fileList="fileList1"
									@afterRead="afterRead"
									@delete="deletePic"
									name="1"
									multiple
									:maxCount="10"
								></u-upload>
						</u-form-item>
					</view>	
			</u--form>
		</view>

		<view style="height: 150rpx;"></view>
		<view class="bottom row-center" @click="goClose">
			<view class="btn row-center" @click="submit">保存</view>
		</view>
		 <u-datetime-picker
						@cancel = "cancelTime"
						@confirm="confirmTime"
		                :show="showStartTime"
		                v-model="info.start_time"
		                mode="datetime"
		        ></u-datetime-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth:140,
				showStartTime:false,
				info:{
					'name':'',
					'address':'',
					'start_time':'',
					'end_time':'',
					'limit':'',
					'fee':'',
					'mobile':'',
					'type':'',
					'fee_platform':'',
					'fee_province':'',
					'fee_city':'',
					'fee_area':'',
					'fee_circle':'',
					'active_invitor':'',
					'active_desc':'',
					'active_imgs':'',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入活动名称',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入活动地点',
						trigger: ['blur', 'change']
					},
					'start_time': {
						type: 'string',
						required: true,
						message: '请输入活动开始时间',
						trigger: ['blur', 'change']
					},
					'end_time': {
						type: 'string',
						required: true,
						message: '请输入活动结束时间',
						trigger: ['blur', 'change']
					},
					'limit': {
						type: 'string',
						required: true,
						message: '请输入人数上线',
						trigger: ['blur', 'change']
					},
					'fee': {
						type: 'string',
						required: true,
						message: '请输入报名费用',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入主办方手机号',
						trigger: ['blur', 'change']
					},
					'type': {
						type: 'string',
						required: true,
						message: '请选择活动形式',
						trigger: ['blur', 'change']
					},
					
					
					'fee_platform': {
						type: 'string',
						required: true,
						message: '请输入平台利润比例',
						trigger: ['blur', 'change']
					},
					'fee_province': {
						type: 'string',
						required: true,
						message: '请输入省级利润比例',
						trigger: ['blur', 'change']
					},
					'fee_city': {
						type: 'string',
						required: true,
						message: '请输入市级利润比例',
						trigger: ['blur', 'change']
					},
					'fee_area': {
						type: 'string',
						required: true,
						message: '请输入区县级利润比例',
						trigger: ['blur', 'change']
					},
					'fee_circle': {
						type: 'string',
						required: true,
						message: '请输入商圈利润比例',
						trigger: ['blur', 'change']
					},
					'active_invitor': {
						type: 'string',
						required: true,
						message: '请输入活动嘉宾',
						trigger: ['blur', 'change']
					},
					'active_desc': {
						type: 'string',
						required: true,
						message: '请输入详情描述',
						trigger: ['blur', 'change']
					},
					'active_imgs': {
						type: 'string',
						required: true,
						message: '请上传列表图片',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.navigateTo({
						url:'/src/pages/merchant_activity/detail'
					})
					uni.$u.toast('校验失败')
				})
			},
			cancelTime(){
				this.showStartTime = false
			},
			confirmTime(e){
				this.showStartTime = false
				this.info.start_time = e.value
			}
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style scoped lang="scss">
	.fee{
		height: 84rpx;
		background: #FFE9D7;
		.fee-text{
			margin-left: 20rpx;
			color: #CD5F28;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
	}
	
	.tip{
		color: #FF4F4F;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 220% */
	}
	
	.bottom {
		width: 100%;
		bottom: 0;
		position: fixed;
		height: 120rpx;
		background: #FFF;

		.btn {
			height: 80rpx;
			width: calc(100% - 72rpx);
			margin-left: 36rpx;
			margin-right: 36rpx;
			border-radius: 40rpx;
			background: #3B60D3;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx;
			/* 150% */
		}
		}
</style>
